<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>商品管理</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered">
    <caption>商品管理                  <button class="btn btn-info" data-toggle="modal" data-target="#myModal">添加商品</button></caption>





    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">添加商品</h4>
                </div>
                <div class="modal-body">
                    <form class="bs-example bs-example-form" role="form">
                        <div class="input-group">
                            <span class="input-group-addon">编 号</span>
                            <input type="text" id="commNumber" name="commNumber" class="form-control" placeholder="请输入商品编号">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">商 品</span>
                            <input type="text" class="form-control" placeholder="请输入商品名">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">价 格</span>
                            <input type="text" class="form-control" placeholder="请输入商品价格">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">类 别</span>
                            <input type="text" class="form-control" placeholder="请输入商品类别">
                        </div>


                    </form>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>











    <thead>
    <tr>
        <th>编号</th>
        <th>商品</th>
        <th>价格</th>
        <th>类别</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td >001</td>
        <td >苹果</td>
        <td >8</td>
        <td >水果</td>
        <td ></td>
    </tr>


    </tbody>
</table>

</body>
</html>